<template>
  <page-card title="任务中心">
    <Card class="dowork-a-card"
          :tab-list="tabListNoTitle"
          :active-tab-key="noTitleKey"
          @tabChange="key => onTabChange(key,'noTitleKey', true)">
      <p>
        <a-form layout="inline"
                :form="form">
          <a-form-item label="关键字">
            <a-input v-model="form.subject"
                     placeholder="请输入" />
          </a-form-item>
          <a-form-item v-show="noTitleKey=='1'"
                       label="来源">
            <a-select v-model="form.source"
                      allowClear
                      showSearch
                      :notFoundContent="null"
                      option-filter-prop="children"
                      :filter-option="filterOption"
                      placeholder="请选择"
                      style="width:240px">
              <a-select-option v-for="(val,index) in sourceList"
                               :key="index"
                               :value="val.appCode">{{ val.value }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-show="noTitleKey=='5'"
                       label="来源">
            <a-select v-model="form.source"
                      allowClear
                      showSearch
                      :notFoundContent="null"
                      option-filter-prop="children"
                      :filter-option="filterOption"
                      placeholder="请选择"
                      style="width:240px">
              <a-select-option v-for="(val,index) in sourceList"
                               :key="index"
                               :value="val.appCode">{{ val.value }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-show="noTitleKey!='1' && noTitleKey!='5'"
                       label="来源">
            <a-select v-model="form.source"
                      allowClear
                      showSearch
                      :notFoundContent="null"
                      option-filter-prop="children"
                      :filter-option="filterOption"
                      placeholder="请选择"
                      style="width:240px">
              <a-select-option v-for="(val,index) in sourceList"
                               :key="index"
                               :value="val.appCode">{{ val.value }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-show="noTitleKey=='2' || noTitleKey=='4'"
                       label="流程状态">
            <a-select v-model="form.flowState"
                      allowClear
                      :notFoundContent="null"
                      option-filter-prop="children"
                      placeholder="请选择流程状态"
                      style="width:240px">
              <a-select-option v-for="(val,index) in flowStateList"
                               :key="index"
                               :value="val.value">{{ val.desc }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"
                      @click="typeClick()"
                      class="btn-query">
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="resetQuery()"
                      class="btn-reset">
              重置
            </a-button>
          </a-form-item>
        </a-form>
        <br><br>
        <PageTable ref="myPageTable"
                   :searchReq="form"
                   style="margin-top:-17px"></PageTable>
      </p>
      <div class="x-slot-default"></div>
    </Card>
  </page-card>
</template>

<script>
import PageTable from './DoWorkTabsTable'
import { getUserAllAppList } from '@zh/base-ant/framework/api/application'
import { PAGINATION } from '@zh/base-ant/framework/constants'
import { Card } from 'ant-design-vue'
export default {
  components: { PageTable, Card },
  data () {
    return {
      sourceList: [],
      flowStateList: [
        { value: '0', desc: '审核中' }, { value: '1', desc: '已通过' }, { value: '2', desc: '已驳回' }
      ],
      localSourceList: [],
      systemSourceList: [],
      pagination: PAGINATION,
      queryParam: {},
      statCount: { dbcount: 0, ybcount: 0 },
      form: {
        subject: '',
        source: undefined,
        sendStartTime: '',
        flowState: undefined,
        sendEndTime: '',
        limitStartTime: '',
        limitEndTime: '',
        status: '',
        creatorId: null,
        taskType: '',
        type: '',
        category: '' // 只有待审批和系统集成需要传值
      },
      tabListNoTitle: [
        { key: '1', tab: '我的待办' },
        // { key: '5', tab: '应用集成' },
        { key: '2', tab: '我的已办' },
        { key: '3', tab: '抄送我的' },
        { key: '4', tab: '我发起的' }
      ],
      // key: '1',
      noTitleKey: ''
      // noTitleKey: '1'
    }
  },
  mounted () {
    this.noTitleKey = this.$route.query.key || '1'
    this.form.source = this.$route.query.appCode || undefined
    this.form.type = this.$route.query.key || '1'
    if (!this.$route.meta.keepAlive) {
      // this.onTabChange(this.$route.query.key || '1', 'noTitleKey', true)
      this.load(this.noTitleKey)
    } else {
      // this.onTabChange(this.$route.query.key || '1', 'noTitleKey')
      this.load(this.noTitleKey)
    }

    this.getSource()
  },
  activated () {
    this.noTitleKey = this.$route.query.key || '1'
    this.form.source = this.$route.query.appCode || undefined
    this.form.type = this.$route.query.key || '1'
    this.load(this.noTitleKey)
  },
  methods: {
    // 来源
    getSource () {
      getUserAllAppList().then((res1) => {
        let res = []
        res1.map(item => {
          item.list.map(app => {
            res.push(app)
          })
        })
        res.sort((a, b) => {
          return a.orderno - b.orderno
        })
        if (res.length > 0) {
          let arr1 = [],
            arr2 = []
          res.map((item) => {
            this.$set(item, 'key', item.id)
            this.$set(item, 'value', item.name)
            let cate = item.category
            if (cate == '1') {
              const obj1 = {
                key: item.id,
                value: item.name,
                appCode: item.appCode
              }
              arr1.push(obj1)
            } else {
              const obj2 = {
                key: item.id,
                value: item.name,
                appCode: item.appCode
              }
              arr2.push(obj2)
            }
          })
          this.localSourceList = arr1
          this.systemSourceList = arr2
          this.sourceList = res
          this.sourceListSort(this.localSourceList, 'value')
          this.sourceListSort(this.systemSourceList, 'value')
          this.sourceListSort(this.sourceList, 'value')
        }
      })
    },
    sourceListSort (list, value) {
      list = list.sort((x, y) => {
        let reg = /[a-zA-Z0-9]/
        if (reg.test(x[value]) || reg.test(y[value])) {
          if (x[value] > y[value]) {
            return 1
          } else if (x[value] < y[value]) {
            return -1
          } else {
            return 0
          }
        } else {
          // return x.localeCompare(y)
          return x[value].localeCompare(y[value])
        }
      })
    },

    // 条件查询
    typeClick (status) {
      if (status) {
        this.form.status = status
      }
      this.pagination.current = 1
      this.load(this.noTitleKey)
    },
    // 重置
    resetQuery () {
      this.form.subject = ''
      this.form.source = undefined
      this.form.flowState = undefined
      this.pagination.current = 1
      this.load(this.noTitleKey)
    },
    // tab切换
    onTabChange (key, type, loadData) {
      this.form.subject = ''
      this.form.source = undefined
      this.form.flowState = undefined
      this.pagination.current = 1
      sessionStorage.setItem('noTitleKey', key)
      this.load(key)
      // if (loadData) {
      //   this.load(key)
      // }
    },
    load (tabKey) {
      this.form.type = tabKey
      this.form.category = ''
      let key = tabKey
      if (tabKey == '1') {
        // this.form.category = '1'
      } else if (tabKey == '5') {
        // this.form.category = '2'
        this.form.type = '1'
        key = '1'
      }
      this.$refs.myPageTable.load(
        this.form,
        (key) => {
          // this.form.type = tabKey
          this.noTitleKey = tabKey
        },
        key
      )
    },
    filterOption (val, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(val.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style lang="less" scoped>
.dowork-a-card {
  border: none;
  // border-radius: 15px;
  :deep(.ant-tabs-nav-container) {
    line-height: 1;
  }
  :deep(.ant-card-head) {
    border-bottom: 0px;
    :deep(.ant-tabs-nav .ant-tabs-tab-active) {
      font-size: var(--font-size-18);
      color: #1890ff;
      text-shadow: none;
    }
    .ant-tabs-tab {
      color: rgba(0, 0, 0, 0.85);
      font-size: 18px;
    }
    :deep(.ant-tabs-ink-bar) {
      background-color: #1890ff;
    }
  }
}
.dowork-btn {
  color: #fff;
  background-color: #1890ff;
  border: 1px;
}
.app-logo {
  width: 50px;
  height: 50px;
  border: 0;
}
.app-logo2 {
  width: 30px;
  height: 30px;
  border: 0;
}
.btn-query {
  &.ant-btn-primary:focus,
  &.ant-btn-primary:active,
  &.ant-btn-primary.active {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}
.btn-reset {
  &.ant-btn:hover,
  &.ant-btn:focus,
  &.ant-btn:active,
  &.ant-btn.active {
    color: rgba(0, 0, 0, 0.65);
    border-color: #d9d9d9;
  }
}
</style>
